<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Title</title>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <script type="text/javascript" charset="utf-8" src="/res/plugin/ueditor1_4_3_3/ueditor.config.js"></script>
  <script type="text/javascript" charset="utf-8" src="/res/plugin/ueditor1_4_3_3/ueditor.all.min.js"> </script>
  <link rel="stylesheet" href="/res/plugin/materialize/css/materialize.min.css">

  <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
  <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
  <script type="text/javascript" charset="utf-8" src="/res/plugin/ueditor1_4_3_3/lang/zh-cn/zh-cn.js"></script>
  <link rel="stylesheet" href="/res/stylesheets/admin-common.css">

  <style>

  </style>
</head>
<body>
<header>
  <div class="row">
    <div class="col s6 header-left">
      <div class="hide-on-med-and-down">后台管理系统</div>
    </div>
    <div class="col s6 right-align header-right">
      <div class="hide-on-med-and-down">
        <div></div>
        <div><img src="https://avatars4.githubusercontent.com/u/16890651?v=4&s=460"></div>
        <div></div>
      </div>
      <div>
        <a href="#" data-activates="nav-mobile" class="button-collapse top-nav waves-effect waves-light circle hide-on-large-only">
          <i class="material-icons">view_headline</i>
        </a>
      </div>
    </div>
  </div>
  <div class="container">


  </div>
  <ul id="nav-mobile" class="side-nav fixed" style="transform: translateX(0%);">
    <li class="bold"><a href="javscript:;" class="waves-effect waves-teal">关于</a></li>
    <li class="bold"><a href="javscript:;" class="waves-effect waves-teal">开始使用</a></li>
    <li class="no-padding">
      <ul class="collapsible collapsible-accordion">
        <li class="bold"><a class="collapsible-header waves-effect waves-teal">CSS</a>
          <div class="collapsible-body">
            <ul>
              <li><a href="javscript:;">颜色</a></li>
              <li><a href="javscript:;">Grid</a></li>
            </ul>
          </div>
        </li>
        <li class="bold"><a class="collapsible-header waves-effect waves-teal">Components</a>
          <div class="collapsible-body">
            <ul>
              <li><a href="javscript:;">Badges</a></li>
              <li><a href="javscript:;">Buttons</a></li>
            </ul>
          </div>
        </li>
        <li class="bold"><a href="javscript:;" class="waves-effect waves-teal">Mobile</a></li>
        <li class="bold"><a href="javscript:;" class="waves-effect waves-teal">展示</a></li>
        <li class="bold"><a class="collapsible-header waves-effect waves-teal">JavaScript</a>
          <div class="collapsible-body">
            <ul>
              <li><a href="javscript:;">Carousel</a></li>
              <li><a href="javscript:;">Collapsible</a></li>
            </ul>
          </div>
        </li>
      </ul>
    </li>
    <li class="bold"><a href="themes.html" class="waves-effect waves-teal">Themes<span class="new badge"></span></a></li>
  </ul>
</header>
<main>
  <div class="row">
    <form class="col s12">
      <div class="row">
        <div class="input-field col s12">
          <input id="input_title" type="text" name="title" maxlength="30" data-length="30">
          <label for="input_title">标题</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s6">
          <input id="input_source" type="text" name="source" data-length="10">
          <label for="input_source">来源</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <textarea id="input_summary" class="materialize-textarea" name="summary" data-length="250"></textarea>
          <label for="input_summary">摘要</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s12 l6">
          <select id="input_categoryId" name="categoryId"  class="">
            <option value="" disabled selected>请选择主题</option>
          </select>
          <label for="input_categoryId">主题</label>
        </div>
      </div>

      <div class="row">
        <div class="input-field col s12">
          <!--<input id="input_labels" name="labels" type="text">-->
          <div >标签</div>
          <div class="chips chips-placeholder"></div>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <input id="input_url" name="url" data-length="120" type="text">
          <label for="input_url">链接</label>
        </div>
      </div>
      <div class="switch">
        <label>
          私密
          <input type="checkbox" id="input_isSecret" checked>
          <span class="lever"></span>
          公开
        </label>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <div id="editor" type="text/plain"></div>
        </div>
      </div>
      <div>
        <div class="input-field col s12">
          <a id="btn-submit" class="waves-effect waves-light btn">发布</a>
          <a class="waves-effect waves-light btn">保存草稿</a>
        </div>
      </div>
    </form>
  </div>
</main>

<script src="/res/plugin/jquery/jquery-3.2.1.min.js"></script>
<script src="/res/plugin/materialize/js/materialize.min.js"></script>
<script src="/res/plugin/layer/layer.js"></script>
<script>
  $(function () {
    getCaregoryAll();
    $('.button-collapse').sideNav();
    $('#nav-mobile').on('click', 'a', function (e) {
      console.log('11111111');
    })
    $('.chips-placeholder').material_chip();
    var ue = UE.getEditor('editor');
    $('#btn-submit').on('click', function (e) {
      layer.confirm('您确定要保存吗?', {
        btn: ['确定', '取消'] //按钮
      }, function () {
        var title = $('#input_title').val();
        var source = $('#input_source').val();
        var summary = $('#input_summary').val();
        var categoryId = $('#input_categoryId').val();
        var url = $('#input_url').val();
        var isSecret = !($('#input_isSecret').prop('checked'));
        var content = UE.getEditor('editor').getContent();

        var labels = $('.chips-placeholder').material_chip('data').map((item, index)=> {
          return item.tag;
        });
        var params = {
          title,
          source,
          summary,
          categoryId,
          labels,
          url,
          isSecret,
          content
        };
        console.log(params);
        $fetch('/api/blog/post', 'post', params).then((result)=> {
          if(result.result==1){
            layer.alert('保存成功');
          }else{
            layer.alert(result.msg);
          }
        }).catch((err)=> {
          console.log(err);
          layer.alert(err);
        });
      });


/*      fetch('/api/blog/post', {
        'method':'post',
        'headers': {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        'credentials': 'include',
        'body': params
      }).then(function (response) {
        console.dir(response);
      }).catch(function (err) {
        console.dir(err)
      })*/

    });
    // $('#input_isSecret').prop('checked')
  });

// 获取全部主题
function getCaregoryAll() {
  $fetch('/api/blog/category/all', 'get').then(function (result) {
    if(result.result===1){
      var text = '';
      result.data.forEach(function (item, index) {
        text += '<option value="'+item._id+'">('+(item.isSecret?'私密':'公开')+')'+item.cateName+'</option>';
      })
      $('#input_categoryId').append(text);
      console.log('success');
      $('#input_categoryId').material_select();
    }else{
      layer.alert(result.message);
    }
  }).catch(function (reject) {
    console.log(reject);
    layer.alert('系统繁忙,获取主题列表失败');
  })
}

function $fetch(url, type = 'post', body) {
  return new Promise(function(resolve, reject){
    var option = {
      'method': type ,
      'headers': {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      'credentials': 'include',
      //     'body': body?JSON.stringify(body):'',
    };
    if(body && type.toLowerCase()!=='get'){
      option.body = JSON.stringify(body);
    }
    fetch(url, option).then(function (response) {
      if (Math.trunc(response.status / 100) === 2) {  //请求成功
        return response.json();
      } else {
        return Promise.reject(response.statusText);
      }
    }).then(function (result) {
      resolve(result);
    }).catch(function (err) {
      reject(err);
    })
  });
}
</script>
</body>
</html>